import { useEffect, useState } from 'react';
import { constRoutes } from '../../router';
import Icon from '@ant-design/icons';
// import {ReactComponent as ClicpCom} from '../../icons/svg/chart.svg'
// import {ReactComponent as ChartSVG} from '../../icons/svg/chart.svg'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';

function mutilyArray(array) {
  if (array.children && array.children.length > 0) {
    return {
      key: array.path,
      children: array.children.map(item => mutilyArray(item)),
      label: <Item title={array.meta.title} icon={array.meta.icon} />,
      custome: 'a'
    }
  } else {
    return {
      key: array.path,
      label: <Item title={array.meta.title} icon={array.meta.icon} />,
      custome: 'a'
    }
  }
}
const Item = (props) => {
  const [icon,setIcon] = useState(<div></div>)
  // useEffect( ()=> {
  //   const getIcon = async ()=> {
  //     import('../../icons/svg/clipboard.svg').then(module=>{
  //       console.log(module.default)
  //       setIcon(mo.default)
  //     })
      
  //   }
  //   getIcon()
    
  // },[])
  return (
    <div style={{fontSize:'14px',color:'rgb(191, 203, 217)'}}><Icon style={{marginRight:'10px'}} component={MailOutlined}></Icon > {props.title}</div>
  )
}



function getItems() {
  // const constRoutes = await import('../router');
  // console.log(constRoutes)

  const sideBarItems = constRoutes[0].children.filter(item => {
    return item.meta
  }).map(item => {
    return mutilyArray(item)
  })
  return sideBarItems 
}

export default getItems



